import React, { useContext } from 'react';
import cs from 'classnames';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import styles from './style/index.module.less';
import { Skeleton, Table, TableColumnProps } from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import { ViolationDetails } from '@/api/interface/violation';

function Related({
  details,
  loading,
}: {
  details: ViolationDetails;
  loading: boolean;
}) {
  const { rtl, lang } = useContext(GlobalContext);
  const t = useLocale(locale);
  const columns: TableColumnProps[] = [
    {
      title: t['related.capacity'],
      dataIndex: 'concernedParties',
    },
    {
      width: 140,
      title: t['related.role'],
      dataIndex: 'role',
      render: (a: any): JSX.Element => {
        return <>{a?.value[lang === 'en-US' ? 'en' : 'ar']}</>;
      },
    },
    {
      title: t['related.nationality'],
      dataIndex: 'nationality',
      render: (a: any): JSX.Element => {
        return <>{a?.value[lang === 'en-US' ? 'en' : 'ar']}</>;
      },
    },
  ];
  return (
    <div className={cs(styles['block'], rtl ? 'rtl' : '')}>
      <div className={styles['block-title']}>{t['related.related']}</div>
      <Skeleton loading={loading} text={{ width: '100%', rows: 5 }} animation>
        <Table
          loading={loading}
          columns={columns}
          data={details.violators.map((a, index) => ({ ...a, key: index }))}
          pagination={false}
          border={{ headerCell: true, wrapper: true }}
          rowKey="key"
        ></Table>
        <div className={styles['space']}></div>
      </Skeleton>
    </div>
  );
}

export default Related;
